<style>

.show_distributor{position:relative;font-size:14px}
.show_distributor .content-wrapper{z-index:2;
    width: 320px;
    position: absolute;
    left: 15px;
    top: 15px;}
.show_distributor .content-wrapper .order-info{box-shadow: 1px 2px 3px 1px #cbcbcb;background:#fff;width:100%;height:200px;margin-bottom:10px}
.show_distributor .content-wrapper .distributor-list{box-shadow: 1px 2px 3px 1px #cbcbcb;background:#fff;width:100%;height:500px;overflow-y:auto;padding-bottom:60px}
.show_distributor .content-wrapper .order-info .order-title{color:#999}
.show_distributor .content-wrapper .order-info .order-header{padding:10px;background:#0a8cff;color:#fff;}
.show_distributor .content-wrapper .order-info .order-body{padding:10px;}
.show_distributor .content-wrapper .order-info .order-body .order-line{line-height:2}

.show_distributor .content-wrapper .distributor-list .distributor-item{overflow:hidden;border-bottom:1px solid #eee;padding-bottom:10px}
.show_distributor .content-wrapper .distributor-list .distributor-item .left{float:left;width:50px;padding-left:10px;padding-top:10px;position:relative;}
.show_distributor .content-wrapper .distributor-list .distributor-item .left img{width:50px;height:50px;border-radius:50%;}
.show_distributor .content-wrapper .distributor-list .distributor-item .left i{position:absolute;width:8px;height:8px;display:block;border-radius:50%;right:4px;bottom:4px;background-color:#dcdcdc}
.show_distributor .content-wrapper .distributor-list .distributor-item .right{float:left;width:180px;padding:10px;margin-top:5px}
.show_distributor .content-wrapper .distributor-list .distributor-item .distributor-btn{float:right;width:28px;margin-right:10px;text-align:right;padding-top:10px;}
.show_distributor .content-wrapper .distributor-list .distributor-item .distributor-static{overflow:hidden;}
.show_distributor .content-wrapper .distributor-list .distributor-item .distributor-static .static{float:left;width:50%;}
.show_distributor .content-wrapper .distributor-list .distributor-item  .distributor-name{font-size:18px;color:#000}
.show_distributor .content-wrapper .distributor-list .distributor-item  .static{color:#999;font-size:12px;}
.show_distributor .content-wrapper .distributor-list .distributor-item  .order-count i{font-size:16px;margin:0 2px;font-style: normal;}
.show_distributor .content-wrapper .distributor-list .distributor-item  .btn1{color: #0579C6;display:none}
.show_distributor .content-wrapper .distributor-list .distributor-item[data-state='1']  .btn1{display:block}
.show_distributor .content-wrapper .distributor-list .distributor-item  .btn2{color: #F60;}
.show_distributor .content-wrapper .distributor-list .distributor-more{padding:20px 0;text-align:center;color:#999;position:absolute;bottom:0;left:0;width:100%;background:#fff}
.show_distributor .content-wrapper .distributor-list .distributor-item.select{background:#d9ebff}
.show_distributor .content-wrapper .distributor-list .distributor-item[data-state='1'][data-receipt='0'] .left i{background:#e84343}
.show_distributor .content-wrapper .distributor-list .distributor-item[data-state='1'][data-receipt='1'] .left i{background:#76e06b}
</style>
<script type="text/javascript" src="{$Think.HTTP_TYPE}api.map.baidu.com/api?v=2.0&ak={$baidu_ak}"></script>
{if $o2o_socket_url}
<script type="text/javascript" src="{$o2o_socket_url}/socket.io/socket.io.js"></script>
{/if}
<div class="show_distributor">
    <div id="allmap" style="width:1000px;height:800px"></div>
    <div class="content-wrapper">
        <div class="order-info">
            <div class="order-header">{$Think.lang.store_order_sn}{$Think.lang.ds_colon}{$order_info.order_sn}</div>
            <div class="order-body">
                <div class="order-line"><span class="order-title">{$Think.lang.store_show_order_receiver}{$Think.lang.ds_colon}</span>{$order_info.reciver_name}</div>
                <div class="order-line"><span class="order-title">{$Think.lang.store_show_order_receiver_address}{$Think.lang.ds_colon}</span>{$order_info.reciver_address}</div>
                <div class="order-line"><span class="order-title">{$Think.lang.store_show_order_mobile}{$Think.lang.ds_colon}</span>{$order_info.reciver_phone}</div>
                <div class="order-line"><span class="order-title">{$Think.lang.seller_order_o2o_order_distance}{$Think.lang.ds_colon}</span>{$order_info.order_distance}m</div>

            </div>
        </div>
        <div class="distributor-list">



            <a class="distributor-more" href="javascript:get_distributor()">加载更多</a>
        </div>
    </div>
    <form action="{if $order_info.order_type=='real_order'}{:url('Sellerorder/deliver_order')}{else if $order_info.order_type=='o2o_errand_order'}{:url('admin/O2oErrandOrder/deliver_order')}{/if}" method="post" id="handle_form">
        <input name="order_id" type="hidden" value="{$order_info.order_id}"/>
        <input name="o2o_distributor_id" type="hidden" />
    </form>
</div>
<script>
    var page = 0;
    var socket_on = false;
    var marker_list = new Array()
            var map
            if ("{$o2o_socket_url}"){
    var socket = io("{$o2o_socket_url}");
    socket.on("connect", function () {
    socket_on = true;
    socket.on('getUser', function(user){
    if ($('.distributor-item[data-id=' + user.user_id + ']').length == 0){
    return
    }

    $('.distributor-item[data-id=' + user.user_id + ']').attr('data-state', 1)
            $('.distributor-item[data-id=' + user.user_id + ']').attr('data-receipt', user.receipt)

            if (typeof (user.lng) != 'undefined' && typeof (user.lat) != 'undefined'){
    var point = new BMap.Point(user.lng, user.lat)
            if (typeof (marker_list[user.user_id]) == 'undefined'){
    var marker


            marker = new BMap.Marker(point)
            marker.initialize = function (map) {
            var div = document.createElement('div')
                    div.style.position = 'absolute'
                    div.style.width = '30px'
                    div.style.height = '30px'
                    div.setAttribute("data-id", user.user_id);
            div.innerHTML = '<img style="width:100%;height:100%;border-radius:50%;" src="' + user.avatar + '">'
                    div.onclick = function(){

                    $('.distributor-item.select').removeClass('select')
                            $('.distributor-item[data-id=' + this.getAttribute('data-id') + ']').addClass('select')


                            $(".distributor-list").animate({scrollTop:$('.distributor-item[data-id=' + this.getAttribute('data-id') + ']').offset().top + "px"}, 500);
                    };
            this.div = div
                    map.getPanes().markerPane.appendChild(div)

                    return div
            }
    marker.draw = function () {
    var point = this.getPosition()
            var position = map.pointToOverlayPixel(point)

            this.div.style.left = position.x - 15 + 'px'
            this.div.style.top = position.y - 15 + 'px'
    }
    marker_list[user.user_id] = marker

            map.addOverlay(marker)
    } else{

    marker_list[user.user_id].setPosition(point)
            marker_list[user.user_id].draw()
    }
    }
    });
    socket.on('delUser', function(user_id){
    $('.distributor-item[data-id=' + user_id + ']').attr('data-state', 0)
    });
    });
    }
    $(function(){
    get_distributor()
    // 百度地图API功能
    map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point({$store_longitude}, {$store_latitude}), 16); // 初始化地图,设置中心点坐标和地图级别
    map.panBy(160, 0)

            var top_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); //左上角，添加默认缩放平移控件

    map.addControl(top_left_navigation);
    map.disableDragging()
            map.disableDoubleClickZoom()
            addMarker({lng: {$store_longitude}, lat: {$store_latitude}, text: '起', color: '#339933'}, map)
            addMarker({lng: {$order_info.order_lng}, lat: {$order_info.order_lat}, text: '终', color: '#006699'}, map)
    })

            function addMarker (info, map) { // 给地图添加标记
            var lng = info.lng
                    var lat = info.lat
                    var text = info.text
                    var color = info.color

                    var marker

                    var point = new BMap.Point(lng, lat)
                    marker = new BMap.Marker(point)
                    marker.initialize = function (map) {
                    var div = document.createElement('div')
                            div.style.position = 'absolute'
                            div.style.width = '45px'
                            div.style.height = '45px'
                            div.style.lineHeight = '45px'
                            div.style.fontSize = '40px'
                            div.style.textAlign = 'center'
                            div.style.color = color
                            div.className = 'iconfont'

                            div.innerHTML = '&#xe720;<b style="font-size:18px;position:absolute;top:0;left:0px;color:#000;line-height:1.8;width:100%">' + text + '</b>'
                            this.div = div
                            map.getPanes().markerPane.appendChild(div)

                            return div
                    }
            marker.draw = function () {
            var point = this.getPosition()
                    var position = map.pointToOverlayPixel(point)

                    this.div.style.left = position.x - 22.5 + 'px'
                    this.div.style.top = position.y - 45 + 'px'
            }

            map.addOverlay(marker)
                    return marker
                    }

    function get_distributor(){
    page++
            $.getJSON({if $order_info.order_type=='real_order'}HOMESITEURL + "/sellerorder/get_distributor_list?order_id={$order_info.order_id}&page=" + page{else if $order_info.order_type=='o2o_errand_order'}ADMINSITEURL + "/o2o_errand_order/get_distributor_list?order_type=o2o_errand_order&order_id={$order_info.order_id}&page=" + page{/if}, function(data){
            if (data.code == 10000){
            var distributor = data.result
                    if (distributor.length){
            for (var i in distributor){
            var str = ''
                    str += '<div class="distributor-item" data-id="' + distributor[i].o2o_distributor_id + '" data-state=0 data-receipt=' + distributor[i].o2o_distributor_receipt + '>'
                    str += '<div class="left"><img src="' + distributor[i].o2o_distributor_avatar + '"><i class="receipt-state"></i></div>'
                    str += '<div class="right">'
                    str += '<div class="distributor-name">' + distributor[i].o2o_distributor_name + '</div>'
                    str += '<div class="distributor-static">'
                    str += '<div class="static">'

                    str += '<div class="order-count">等待<i>' + distributor[i].count_wait + '</i>单</div>'
                    str += '</div>'
                    str += '<div class="static">'

                    str += '<div class="order-count">完成<i>' + distributor[i].count_complete + '</i>单</div>'
                    str += '</div>'
                    str += '</div>'
                    str += '</div>'
                    str += '<div class="distributor-btn">'
                    str += '<a class="btn1" href="javascript:markerPosition(' + distributor[i].o2o_distributor_id + ')">定位</a>'
                    str += '<a class="btn2" href="javascript:deliverOrder(' + distributor[i].o2o_distributor_id + ')">指派</a>'
                    str += '</div>'
                    str += '</div>'
                    $('.distributor-list').prepend(str);
            if (socket_on){
            socket.emit("getUser", distributor[i].o2o_distributor_id);
            }
            }
            } else{
            layer.msg('没有更多了');
            }
            } else{
            layer.msg(data.message);
            }
            })

            }
    function deliverOrder(user_id){
    $('[name="o2o_distributor_id"]').val(user_id)
            if ($('.distributor-item[data-id=' + user_id + ']').attr('data-state') == 0){
    layer.confirm("{$Think.lang.seller_order_distributor_state_confirm}", {
    btn: ['确定', '取消'],
            title: false,
    }, function () {
    submit_form()
    });
    } else if ($('.distributor-item[data-id=' + user_id + ']').attr('data-receipt') == 0){
    layer.confirm("{$Think.lang.seller_order_distributor_receipt_confirm}", {
    btn: ['确定', '取消'],
            title: false,
    }, function () {
    submit_form()
    });
    } else{
    layer.confirm("{$Think.lang.seller_order_distributor_deliver_confirm}", {
    btn: ['确定', '取消'],
            title: false,
    }, function () {
    submit_form()
    });
    }

    }
    function submit_form(){

    var _form = $("#handle_form");
    $.ajax({
    type: "POST",
            url: _form.attr('action'),
            data: _form.serialize(),
            dataType:"json",
            success: function (res) {
            if (res.code == 10000) {
            if (socket_on){
            socket.emit("addOrder", res.result.order_info);
            }
            layer.msg(res.message, {time: 1000}, function () {
                {if $order_info.order_type=='real_order'}
                location.href = '{:url('Sellerorder/index')}';
                {else if $order_info.order_type=='o2o_errand_order'}
                parent.location.reload(); 
                {/if}
            
            });
            } else{
            layer.msg(res.message)
            }
            }
    });
    }
    function markerPosition(user_id){
    if (typeof (marker_list[user_id]) != 'undefined'){
    map.centerAndZoom(marker_list[user_id].getPosition(), 16); // 初始化地图,设置中心点坐标和地图级别
    map.panBy(160, 0)
    }

    }
</script>


